<template>
 <div class="bigContent">
   <div class="login-wrap" v-show="showLogin">
     <div class="login-left">
       <img src="~@/assets/img/login/login-pic2.png" class="pic">
       <div><span class="loginTitle">学委作业管理系统</span></div>
     </div>
      <img src="~@/assets/iconfont/plant.png" class="smallPic">
     <div class="login-right">
       <div class="login-right-up">
        <form enctype="multipart/form-data" method="POST">
          <span class="Font">账号：</span><input type="text" class="i-text">
          <span class="Font">密码：</span><input type="password" class="i-text">
        </form>
       </div>
       <el-button type="primary" class="i-botton">注册</el-button>
       <el-button type="primary" class="i-botton">登录</el-button>
       <el-divider content-position="right">项目经理：薛凯娜</el-divider>
      </div>
		</div>
    <div class="register-wrap" v-show="showRegister">
    </div>
  </div>
</template>

<script>
  export default{
    data() {
      return {
        showLogin: true,
        showRegister: false,
      };
    },
  };
</script>

<style scoped>
  .bigContent{
    width: 100%;
    height: 100%;
    margin: auto;
    background-image: url('~@/assets/img/login/login_background.png');
    background-size: 100% 100%;
    }
  .login-wrap{
    background-color: #fff;
		opacity: 0.8;
		position: absolute;
		margin: auto;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		text-align: center;
		width: 60%;
		height: 0;
    padding-bottom: 30%;
    border-radius: .4rem;
    box-shadow: .1rem .1rem .7rem black;
  }
  .login-left{
    width: 10rem;
    height: 8rem;
    margin: 1rem 0 0 1rem;
    float: left;
    /* background-color: aqua; */
  }
  .pic{
    width: 8rem;
    height: 6.5rem;
    margin: .5rem 0 .8rem 0;
    }
  .loginTitle{
    font-size: .8rem;
    color: #142344;
    letter-spacing: .1rem;
  }
  .smallPic{
    width: 3.5rem;
    height: 2.5rem;
    margin: .5rem 0 0 8rem;
  }
  .login-right{
    /* border:.05rem solid #66CCCC; */
    border-radius: .2rem;
    float: right;
    width: 8.5rem;
    height: 7.5rem;
    margin: -1.5rem 1.8rem 0 0;
    /* background-color: #66CCCC; */
  }
  .login-right-up{
    margin: 2rem 0 2rem .4rem;
  }
  .i-text{
    display: block;
    width: 5rem;
		height: .8rem;
    margin: 1rem 2rem;
    color:#303133;
    padding: .18rem;
		box-sizing:border-box;
  }
  .Font{
    font-size: .6rem;
    line-height: .8rem;
    float: left;
    /* text-align: left; */
  }
  .i-botton{
    width: 2rem;
    height: 1rem;
    font-size: .45rem;
    background-color: #142344;
    border: none;
    margin: -1rem .8rem 1.3rem .2rem;
  }
  .register-wrap{
    background-color: #fff;
    opacity: 0.8;
		position: absolute;
		margin: auto;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		text-align: center;
		width: 30%;
		height: 20%;
    padding-bottom: 30%;
    border-radius: .4rem;
    box-shadow: .1rem .1rem .7rem black;
  }
</style>
